<template>
  <view class="customer-list">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input 
        type="text" 
        v-model="keyword" 
        placeholder="搜索客户昵称/手机号" 
        @confirm="getCustomerListData"
      />
      <button class="search-btn" @click="getCustomerListData">搜索</button>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-item" @click="showTagFilter = true">
        标签筛选: {{ selectedTag || '全部' }}
      </view>
      <view class="filter-item" @click="showSortFilter = true">
        排序: {{ sortText }}
      </view>
    </view>

    <!-- 客户列表 -->
    <view class="customer-table">
      <view class="table-header">
        <view class="col-1">客户信息</view>
        <view class="col-2">注册时间</view>
        <view class="col-3">消费总额</view>
        <view class="col-4">订单数</view>
      </view>
      
      <view class="table-body">
        <view 
          class="table-row" 
          v-for="(customer, index) in customerList" 
          :key="index" 
          @click="goToDetail(customer.customer_id)"
        >
          <view class="col-1">
            <image :src="customer.avatar" class="avatar"></image>
            <view class="customer-info">
              <view class="nickname">
                {{ customer.nickname }}
                <view class="tags">
                  <text v-for="(tag, i) in customer.tags" :key="i" class="tag">{{ tag }}</text>
                </view>
              </view>
              <view class="mobile">{{ customer.mobile }}</view>
            </view>
          </view>
          <view class="col-2">{{ customer.register_time }}</view>
          <view class="col-3">¥{{ customer.total_consume.toFixed(2) }}</view>
          <view class="col-4">{{ customer.order_count }}</view>
        </view>
      </view>
    </view>

    <!-- 分页 -->
    <uni-pagination 
      :current="page" 
      :pageSize="size" 
      :total="total" 
      @change="handlePageChange"
    ></uni-pagination>

    <!-- 标签筛选弹窗 -->
    <uni-popup 
      type="bottom" 
      :show="showTagFilter" 
      @close="showTagFilter = false"
    >
      <view class="popup-content">
        <view class="popup-title">选择标签</view>
        <view class="tag-list">
          <view 
            class="tag-item" 
            :class="{ selected: tag.tag_id === selectedTagId }" 
            @click="selectTag(tag.tag_id, tag.tag_name)"
            v-for="tag in tagList" 
            :key="tag.tag_id"
          >
            {{ tag.tag_name }}({{ tag.count }})
          </view>
          <view 
            class="tag-item" 
            :class="{ selected: selectedTagId === '' }" 
            @click="selectTag('', '全部')"
          >
            全部
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 排序筛选弹窗 -->
    <uni-popup 
      type="bottom" 
      :show="showSortFilter" 
      @close="showSortFilter = false"
    >
      <view class="popup-content">
        <view class="popup-title">选择排序方式</view>
        <view class="sort-list">
          <view 
            class="sort-item" 
            :class="{ selected: sort_type === 0 }" 
            @click="selectSort(0)"
          >
            默认排序
          </view>
          <view 
            class="sort-item" 
            :class="{ selected: sort_type === 1 }" 
            @click="selectSort(1)"
          >
            消费金额从高到低
          </view>
          <view 
            class="sort-item" 
            :class="{ selected: sort_type === 2 }" 
            @click="selectSort(2)"
          >
            注册时间从新到旧
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPagination from "@/components/uni/uni-pagination/uni-pagination.vue"
import uniPopup from "@/components/uni/uni-popup/uni-popup.vue"

export default {
  components: {
    uniPagination,
    uniPopup
  },
  data() {
    return {
      customerList: [],
      total: 0,
      page: 1,
      size: 20,
      keyword: '',
      tagList: [],
      selectedTagId: '',
      selectedTag: '全部',
      sort_type: 0,
      sortText: '默认排序',
      showTagFilter: false,
      showSortFilter: false
    }
  },
  onLoad() {
    this.getCustomerTags()
    this.getCustomerListData()
  },
  methods: {
    // 获取客户列表
    getCustomerListData() {
      const params = {
        page: this.page,
        size: this.size,
        keyword: this.keyword,
        tag_id: this.selectedTagId || '',
        sort_type: this.sort_type
      }
      this.$api.http.getCustomerList(params).then(res => {
          if (res.status === 1) {
            // 分页数据叠加（首页覆盖，非首页追加）
            this.customerList = this.page === 1 
              ? res.data.list 
              : [...this.customerList, ...res.data.list]
            this.total = res.data.total
          }
        })
    },
    
    // 获取标签列表
    getCustomerTags() {
      this.$api.http.getCustomerTags().then(res => {
        if (res.status === 1) {
          this.tagList = res.data
        }
      })
    },
    
    // 分页切换
    handlePageChange(e) {
      this.page = e.current
      this.getCustomerListData()
    },
    
    // 选择标签
    selectTag(tagId, tagName) {
      this.selectedTagId = tagId
      this.selectedTag = tagName
      this.showTagFilter = false
      this.page = 1
      this.getCustomerListData()
    },
    
    // 选择排序
    selectSort(type) {
      this.sort_type = type
      switch(type) {
        case 0:
          this.sortText = '默认排序'
          break
        case 1:
          this.sortText = '消费金额从高到低'
          break
        case 2:
          this.sortText = '注册时间从新到旧'
          break
      }
      this.showSortFilter = false
      this.page = 1
      this.getCustomerListData()
    },
    
    // 前往详情页
    goToDetail(customerId) {
      if (!customerId) {
        uni.showToast({ title: '客户ID不存在', icon: 'none' })
        return
      }
      uni.navigateTo({
        url: `/pages/kehu/detail/detail?customerId=${customerId}`,
        fail: (err) => console.error('跳转失败:', err) // 增加错误回调
      })
    }
  }
}
</script>

<style lang="less">
.customer-list {
  padding: 15px;
  
  .search-bar {
    display: flex;
    margin-bottom: 15px;
    input {
      flex: 1;
      height: 36px;
      padding: 0 15px;
      border-radius: 18px 0 0 18px;
      background-color: #f5f5f5;
      border: none;
    }
    .search-btn {
      width: 80px;
      height: 36px;
      line-height: 36px;
      background-color: #fa436a;
      color: #fff;
      border: none;
      border-radius: 0 18px 18px 0;
      font-size: 14px;
    }
  }
  
  .filter-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    .filter-item {
      padding: 5px 15px;
      background-color: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
    }
  }
  
  .customer-table {
    border: 1px solid #eee;
    border-radius: 4px;
    .table-header {
      display: flex;
      background-color: #f9f9f9;
      border-bottom: 1px solid #eee;
      padding: 10px;
      .col-1 { width: 40%; }
      .col-2 { width: 20%; }
      .col-3 { width: 20%; }
      .col-4 { width: 20%; }
    }
    .table-row {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
      }
      .col-1 { 
        width: 40%;
        display: flex;
        align-items: center;
        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .customer-info {
          .nickname { 
            font-weight: bold;
            margin-bottom: 5px;
            .tags {
              display: inline-block;
              margin-left: 5px;
              .tag {
                display: inline-block;
                background-color: #e8f4fd;
                color: #409eff;
                font-size: 12px;
                padding: 0 5px;
                border-radius: 3px;
                margin-right: 3px;
              }
            }
          }
          .mobile { font-size: 12px; color: #999; }
        }
      }
      .col-2 { width: 20%; }
      .col-3 { width: 20%; color: #e53e3e; }
      .col-4 { width: 20%; }
    }
  }
  
  .popup-content {
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 15px;
    .popup-title {
      text-align: center;
      font-size: 16px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .tag-list, .sort-list {
      .tag-item, .sort-item {
        padding: 12px 0;
        text-align: center;
        border-bottom: 1px solid #eee;
        &:last-child {
          border-bottom: none;
        }
        &.selected {
          color: #fa436a;
          position: relative;
          &:after {
            content: "✓";
            position: absolute;
            right: 20px;
          }
        }
      }
    }
  }
}
</style>